<template>
  <div class="container mt-4">
    <!-- 期刊列表 -->
    <div v-if="currentView === 'journalList'" class="row g-4 mb-4">
      <div
        v-for="journal in journals"
        :key="journal.id"
        class="col-12 col-md-6 col-lg-4"
      >
        <div
          class="card h-100 shadow-sm cursor-pointer hover-effect"
          @click="selectJournal(journal)"
        >
          <img
            :src="journal.periodicalPic?journal.periodicalPic:defaultCover"
            class="card-img-top journal-cover"
            alt="期刊封面"
          />
          <div class="card-body">
            <h5 class="card-title">{{ journal.name }}</h5>
            <div class="badge mb-2" style="background-color: #133068">
              {{ journal.createTime }}
            </div>
            <p class="text-truncate-3">{{ journal.description }}</p>
          </div>
        </div>
      </div>
    </div>

    <!-- 期刊文章列表 -->
    <div v-if="currentView === 'articleList'">
      <button
        class="btn mb-3"
        style="background-color: #133068; color: white"
        @click="backToJournals"
      >
        <i class="bi bi-arrow-left"></i> 返回期刊列表
      </button>

      <div class="card shadow mb-4">
        <div
          class="card-header text-white"
          :style="{ backgroundColor: '#133068' }"
        >
          <h4 class="mb-0">{{ selectedJournal.title }}</h4>
        </div>
        <div class="card-body">
          <div class="row">
            <div class="col-md-4 mb-3">
              <img
                :src="selectedJournal.cover?selectedJournal.cover:defaultCover"
                class="img-fluid rounded"
                alt="期刊封面"
              />
            </div>
            <div class="col-md-8">
              <div class="list-group">
                <a
                  v-for="article in selectedJournal.manuscripts"
                  :key="article.id"
                  href="#"
                  class="list-group-item list-group-item-action"
                  @click.prevent="selectArticle(article)"
                >
                  <div class="d-flex w-100 justify-content-between">
                    <h5 class="mb-1">{{ article.name }}</h5>
                    <small>{{ article.createTime }}</small>
                  </div>
                  <p class="mb-1">{{ article.authors }}</p>
                  <small class="text-muted">点击查看详情</small>
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 文章详情 -->
    <div v-if="currentView === 'articleDetail'">
      <button
        class="btn mb-3"
        style="background-color: #133068; color: white"
        @click="backToArticles"
      >
        <i class="bi bi-arrow-left"></i> 返回文章列表
      </button>

      <div class="card shadow mb-4">
        <div
          class="card-header text-white"
          :style="{ backgroundColor: '#133068' }"
        >
          <h4 class="mb-0">{{ selectedArticle.name }}</h4>
        </div>
        <div class="card-body">
          <div class="row">
            <div class="col-md-8">
              <h5>作者</h5>
              <p class="author-list">
                {{ selectedArticle.authors }}
              </p>

              <h5 class="mt-4">摘要</h5>
              <div class="abstract-box">
                {{ selectedArticle.abstractWord }}
              </div>

              <h5 class="mt-4">关键词</h5>
              <div class="keyword-badges">
                {{ selectedArticle.keywords }}
              </div>
            </div>
            <div class="col-md-4">
              <div class="info-box p-3 bg-light rounded">
                <h6>期刊信息</h6>
                <p class="mb-1">{{ selectedJournal.name }}</p>
                <p class="text-muted small">{{ selectedJournal.createTime }}</p>

                <h6 class="mt-3">论文信息</h6>
                <dl class="row small">
                  <dt class="col-5">分类号</dt>
                  <dd class="col-7">{{ selectedArticle.classification }}</dd>

                  <dt class="col-5">学科专业</dt>
                  <dd class="col-7">{{ selectedArticle.major }}</dd>
                </dl>
              </div>
            </div>
          </div>
          <div class="row">
            <div class="text-center fw-bold">内容</div>
            <dd class="container" style="text-indent: 2em">
              {{ selectedArticle.content }}
            </dd>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import {onMounted, ref} from "vue";
import {getAllPeriodical} from "@/api/user.js";
const periodicalList = ref([]);

// 状态管理
const currentView = ref("journalList");
const journals = ref([]);
const selectedJournal = ref(null);
const selectedArticle = ref(null);

// 默认封面
const defaultCover = require("@/assets/images/计算机科学.jpg");
// 稿件数据
const manuscript = [
  {
    id: 1,
    name: "计算机技术",
    periodicalPic: require("@/assets/images/计算机科学.jpg"),
    createTime: "2024-03",
    description: "计算机领域最新研究成果",
    manuscripts: [
      {
        id: 1,
        title: "基于SpringCloud的“芸窗”期刊采编系统设计与实现",
        authors: "陈启迪",
        date: "2024-09-27",
        abstractWord:
          "随着信息技术的发展，传统的期刊采编平台已经不能满足现代学术平台的需求。期刊系统往往具有体量大、业务复杂、访问人数多的特点。在现代技术发展日新月异的情况下，高效的程序处理能力、程序的逻辑严谨性变得至关重要。为了提高期刊编辑部门的工作效率，利用程序帮助用户减少重复工作，为学术论文的投稿、审核、发布等流程提供更加便捷的服务体验，本研究设计并实现一个基于SpringCloud的期刊采编系统。",
        keywords: "期刊采编；微服务；Spring Cloud技术；Vue框架",
        content:
          "近年来，随着我国信息技术领域的快速发展，包括大数据、云计算和人工智能等前沿技术的成熟，促使软件平台系统不断融合此类先进技术，开发出具有独特特色、功能强大的软件产品。同时，此类技术进一步推动了传统期刊出版行业的变革与创新，采用先进的数字化技术和互联网平台来发展并完善期刊出版系统，已成为促进学术交流和知识传播的重要趋势。",
        classification: "CQD",
        major: "计算机技术",
      },
      // 更多文章...
    ],
  },
  {
    id: 1,
    name: "环境工程",
    periodicalPic: require("@/assets/images/环境工程.jpg"),
    createTime: "2024-03",
    description: "环境科学与工程领域最新研究成果",
    manuscripts: [
      {
        id: 101,
        title: "水生植物滤床技术改善富营养化水体水质的研究",
        authors: "宋海亮",
        date: "2024-03-15",
        abstractWord:
          "水生植物滤床是将植物净化和物理过滤方式相结合的一种新型无基质型人工湿地系统...",
        keywords: "富营养化, 水生植物滤床, 水质改善",
        content: "111111111111",
        classification: "X52",
        advisor: "吕锡武",
        major: "环境工程",
      },
      // 更多文章...
    ],
  },
  // 更多期刊...
];

// 初始化加载数据
onMounted(async () => {
  let result = await getAllPeriodical();
  periodicalList.value = result.data;
  if (periodicalList.value.length > 0) {
    journals.value = periodicalList.value;
  } else {
    journals.value = manuscript;
  }
});

// 导航方法
const selectJournal = (journal) => {
  selectedJournal.value = journal;
  currentView.value = "articleList";
};

const selectArticle = (article) => {
  selectedArticle.value = article;
  currentView.value = "articleDetail";
};

const backToJournals = () => {
  currentView.value = "journalList";
  selectedJournal.value = null;
};

const backToArticles = () => {
  currentView.value = "articleList";
  selectedArticle.value = null;
};
</script>

<style scoped>
.hover-effect:hover {
  transform: translateY(-3px);
  transition: transform 0.6s ease;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

.journal-cover {
  height: 200px;
  object-fit: cover;
  border-bottom: 1px solid rgba(0, 0, 0, 0.125);
}

.text-truncate-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.abstract-box {
  white-space: pre-wrap;
  line-height: 1.8;
  background: #f8f9fa;
  padding: 1rem;
  border-radius: 0.25rem;
}

.info-box {
  position: sticky;
  top: 20px;
}

.author-list {
  font-size: 0.9rem;
  color: #6c757d;
}

.keyword-badges {
  color: #6c757d;
  margin: 1rem 0;
}
</style>